<template>
    <div class="fenlei">
        <van-nav-bar
        title="菜单分类"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        />
        <div class="cont">
            <div class="left">
                <van-sidebar v-model="activeKey">
                    <van-sidebar-item v-for="(item,i) in data" :key="i" :title="item.name" />
                </van-sidebar>
            </div>
            <div class="right" v-if="data[activeKey]!=null">
                <div class="item" v-for="(item,i) in data[activeKey].cs" :key="i">
                    <div class="top" @click="toSearch(item.name)">{{item.name}}</div>
                    <div class="bottom" v-if="item.cs[0]!= undefined">
                        <div class="itemm" v-for="(a,i) in item.cs" :key="i" @click="toSearch(a.name)">{{a.name}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'fenlei',
        data() {
            return {
            activeKey: 0,
            data:[]
            };
        },
        created(){
            this.axios.get(`https://apis.netstart.cn/douguo/recipe/flatcatalogs`). then((response) => {
            if (response.data.state=== "success") {
                    this.data = response.data.result.cs
                }
            })
        },
        methods: {
            onClickLeft() {
                this.$router.back()
            },
            toSearch(v){
                this.$router.push({name:'search',query:{search:v}})
            }
        },
    }
</script>

<style lang="less" scoped>
    .fenlei{
        /deep/.van-nav-bar__text {
        color: #6e6e6e;
        }
        /deep/.van-nav-bar .van-icon {
        color: #6e6e6e;
        }
        .van-sidebar-item{
            text-align: center;
        }
        .cont{
            display: flex;
            .left{
                height: calc(100vh - 46px);
                overflow-y: auto;
            }
            .right{
                flex: 1;
                height: calc(100vh - 46px);
                overflow-y: auto;
                padding: 10px;
                box-sizing: border-box;
            }
            .item{
                width: 100%;
                .top{
                    width: 100%;
                    height: 50px;
                    text-align: center;
                    line-height: 50px;
                    font-size: 18px;
                    font-weight: 700;
                    background-color: antiquewhite;
                    border-radius: 10px;
                    margin-bottom: 10px;
                }
                .bottom{
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: center;
                    .itemm{
                        min-width: 50px;
                        height: 25px;
                        line-height: 25px;
                        text-align: center;
                        outline: 1px solid #c8c8c8;
                        margin: 5px;
                        border-radius: 5px;
                        padding: 0 5px;
                    }
                }
            }
        }
    }
</style>